<template>
  <view>
    <u-checkbox-group ref="checkboxGroup" placement="column">

      <view class="list" @click="checkbox(item.id)" v-for="item in words" :key="item.id">
        <!-- name用id进行绑定 -->
        <u-checkbox iconSize="40rpx" v-if="operate" customStyle="position: absolute;margin-left: 40rpx;" size="50rpx"
          :name="item.id" class="checkbox">
        </u-checkbox>
        <view class="word" :style="operate?'margin-left: 85rpx ;':''">
          <!-- 英文单词 -->
          <text>{{item.word}}</text>
          <br>
          <!-- 单词释义 -->
          <text style="color: #646566;font-size: 35rpx;">{{item.translation}}</text>
        </view>
        <span class="iconfont" @click.stop="audio(item.word)">&#xe6fd;</span>
      </view>
    </u-checkbox-group>

    <van-dialog id="van-dialog" />
  </view>

</template>

<script>
  import Dialog from '@/wxcomponents/vant/dialog/dialog';
  export default {
    name: "WordList",
    props: {
      // 单词数据
      words: Array,

      // 长按显示
      operate: Boolean
    },
    data() {
      return {
        // 选中的数据
        checkboxValue1: [],
        that: null, //音频防抖

      };
    },
    methods: {
      // 扩中选中范围
      checkbox(id) {
        uni.navigateTo({
          url: '/subpkg/wordDetails/wordDetails?dept_id=' + this.words[0].dept_id + '&id=' +
            id //把单词本id和当前单词id传给单词详情页面
        })

      },
      // 单词发音事件
      audio(word) {
        // main.js文件中把音频实例保存为全局变量
        this.$audio.src = 'http://dict.youdao.com/dictvoice?audio=' + word
        this.$audio.play()
      }
    }
  }
</script>

<style lang="scss">
  .list {
    position: relative;
    height: 130rpx;
    background-color: white;
    border-bottom: 1px solid #d5d9d5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .word {
      height: 100%;
      padding: 0 40rpx;
      line-height: 65rpx;
      font-size: 40rpx;
    }

    span {
      height: 100%;
      padding: 0 40rpx;
      font-size: 50rpx;
      line-height: 130rpx;
    }
  }

  .checkbox {
    border: 1px solid;
  }
</style>
